<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick" style="position: relative">
      <el-tab-pane  name="first">
        <div class="second-con">
          <el-tabs v-model="activeTopic" type="card" @tab-click="handleClicktop">
            <el-tab-pane label="最热" name="newest">
              <ul class="newtopicul">
                <li v-for="item in newTopics" :key="item.id" >
                  <div class="newtitleleft">
                    <img
                      :src="item.path"
                      width="85px"
                      height="85px"
                      style="margin-right: 10px"
                    />
                    <div>
                      <p class="titlecon" @click="toTopicInfo(item.id)">{{ item.title }}</p>
                      <span style="margin-right: 10px">{{ item.username }}</span
                      >发布时间:<span>{{
                        item.pubdate.substring(0, item.pubdate.indexOf(" "))
                      }}</span>
                    </div>
                  </div>
                  <div style="line-height: 85px">
                    回复<span style="margin: 0 10px">{{ item.newest }}</span>
                  </div>
                </li>
              </ul>
            </el-tab-pane>
            <el-tab-pane label="最新" name="pubdate">
              <ul class="newtopicul">
                <li v-for="item in pubdateTopics" :key="item.id">
                  <div class="newtitleleft">
                    <img
                      :src="item.path"
                      width="85px"
                      height="85px"
                      style="margin-right: 10px"
                    />
                    <div>
                      <p class="titlecon" @click="toTopicInfo(item.id)">{{ item.title }}</p>
                      <span style="margin-right: 10px">{{ item.username }}</span
                      >发布时间:<span>{{
                        item.pubdate.substring(0, item.pubdate.indexOf(" "))
                      }}</span>
                    </div>
                  </div>
                  <div style="line-height: 85px">
                    回复<span style="margin: 0 10px">{{ item.newest }}</span>
                  </div>
                </li>
              </ul>
            </el-tab-pane>
          </el-tabs>
        </div>
        <el-button
                type="primary"
                size="mini"
                class="elbtn"
                icon="el-icon-edit"
                @click="toPush"
                >发布新贴</el-button
              >
      </el-tab-pane>
    </el-tabs>
    <div style="text-align: center">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-size="itemsPerPage"
        :page-sizes="[5, 10, 15, 20]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog title="发布热帖" width="750px" :visible.sync="dialogTableVisible">
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        :rules="rules"
        label-width="10px"
        size="normal"
        hide-required-asterisk
        status-icon
        label-position="right"
      >
        <p>标题</p>
        <el-form-item  prop="title">
          <el-input v-model="ruleForm.title"></el-input>
        </el-form-item>
        <p>内容</p>
        <el-form-item  prop="content">
          <el-input v-model="ruleForm.content"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="onSubmit('ruleForm')"
            >发布</el-button
          >
          <el-button size="small" @click="dialogTableVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "first",
      activeTopic: "newest",
      newTopics: [],
      pubdateTopics: [],
      page: 1,
      itemsPerPage: 5,
      total: 0,
      dialogTableVisible: false,
      ruleForm: {
        title: "",
        content: "",
      },
      rules: {
        title: [{ required: true, message: "请输入标题" }],
        content: [{ required: true, message: "请输入内容" }],
      },
    };
  },
  created() {
    this.getNewTopics();
  },
  methods: {
    handleClick(tab, event) {
      // console.log(tab);
      // console.log(tab, event);
    },
    handleClicktop(tab, event) {
      this.page = 1;
      this.getNewTopics();
    },
    /* 获得新帖子 */
    getNewTopics() {
      this.$dao
        .querySelectHot(this.page, this.itemsPerPage, this.activeTopic)
        .then((res) => {
          // console.log(res)
          if (res.data.flag) {
            if (this.activeTopic === "newest") {
              this.newTopics = res.data.data;
            } else {
              this.pubdateTopics = res.data.data;
            }
            this.total = res.data.total;
          }
        });
    },
    /* 发布 */
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        this.ruleForm.uid = localStorage.getItem('etoak_cms_token')
        if (valid) {
          this.$dao.addTopic(this.ruleForm).then((res) => {
            if (res.data.flag) {
              this.$message.success("发布成功");
              this.dialogTableVisible = false;
              this.getNewTopics()
            } else {
              this.$message.error("发布失败");
            }
          });
        }
      });
    },
    toPush() {
      this.ruleForm = {
        title: "",
        content: "",
      };
      this.dialogTableVisible = true;
    },
    /* 分页 */
    handleSizeChange(val) {
      this.itemsPerPage = val;
      this.getNewTopics();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getNewTopics();
    },
    /* 跳转 */
    toTopicInfo(id){
      this.$router.push(`/topicinfo?id=${id}`)
    }
  },
};
</script>
<style scoped>
.second-con {
  width: 1000px;
  /* border: 1px solid saddlebrown; */
  margin: 0 auto;
  /* outline: 2px solid rgb(155, 155, 158); */
}
.elbtn {
  position: absolute;
  right: 10px;
  top: 5px;
}
.newtopicul li {
  display: flex;
  list-style: none;
  justify-content: space-between;
  margin-bottom: 10px;
  /* border: 1px solid red; */
}
.newtitleleft {
  display: flex;
}
.titlecon {
  font-size: 20px;
  font-weight: bold;
  cursor:pointer
}
</style>
